<template>
  <div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
      "
    >
      快速检索
    </div>
    <div>
      <div style="margin-top: 15px; margin-bottom: 15px">
        <el-input placeholder="请输入检索的关键字" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
      "
    >
      方案列表
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%; height: 50vh; overflow: auto;">
    <el-table-column
      prop="waterStopCode"
      label="停水编号"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="waterStopTitle"
      label="停水标题"
      width="180"
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="状态"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="info" icon="el-icon-notebook-2" circle @click="openDetail(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="deleteRow(scope.row)"></el-button>
      </template>
    </el-table-column>
</el-table>
    </div>
    <div style="display: flex; justify-content: flex-end; margin-top: 5px">
      <el-button
        type="primary"
        icon="el-icon-refresh"
        plain
        style="margin-right: 7px"
        @click="refreshTable"
        >刷新</el-button
      >
    </div>
    <el-dialog
      :modal="false"
      title="用户详细信息"
      :visible.sync="userDetailVisible"
      class="userDetailDialog"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          flex-wrap: wrap;
        "
      >
        <div style="width: 680px; display: flex; justify-content: space-around">
          <div>
            压力类型
            <el-select
              v-model="selectedPressureTypes"
              style="margin-left: 7px; width: 8rem !important"
              size="small"
              placeholder="全部"
            >
              <el-option value="直供" label="直供"></el-option>
              <el-option value="低压" label="低压"></el-option>
              <el-option value="中压" label="中压"></el-option>
              <el-option value="高压" label="高压"></el-option>
              <el-option value="超高压" label="超高压"></el-option>
            </el-select>
          </div>
          <div class="top_show">
            户名
            <el-input
              v-model="userName"
              style="margin-left: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="top_show">
            地址
            <el-input
              v-model="userAddress"
              style="margin-left: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>

        <div
          style="
            width: 357px;
            display: flex;
            justify-content: flex-end;
            margin-top: 0.5rem;
          "
        >
          <div class="top_show">
            添加户号
            <el-input
              v-model="newAccountNumber"
              style="margin-left: 7px; margin-right: 7px; width: 150px"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div>
            <el-button
              size="small"
              type="primary"
              plain
              @click="addAccountNumber"
              >添加</el-button
            >
           
          </div>
          <div style="margin-left:10px">
            <el-button size="small" type="primary" plain @click="exportForm"
            >导出</el-button>
          </div>
        </div>
      </div>
      <div style="height: 200px; overflow: auto">
        <el-table
          border
          :data="userTableData"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column type="selection" width="30"></el-table-column>
          <el-table-column label="序号" width="60"></el-table-column>
          <el-table-column
            prop="userId"
            label="户号"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="户名"
            width="200"
          ></el-table-column>
          <el-table-column prop="userAddress" width="200" label="地址"></el-table-column>
          <el-table-column
            prop="diameter"
            label="口径"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="pressureLevel"
            label="压力级别"
            width="100"
          ></el-table-column>
        </el-table>
      </div>
      <div>
        <div style="margin-top: 10px">
          停水编号：
          <el-input
            v-model="shutdownNumber"
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          停水标题：
          <el-input
            v-model="shutdownTitle"
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水原因：</span>
          <el-input
            v-model="shutdownReason"
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          实施地点：
          <el-input
            v-model="implementationLocation"
            style="margin-left: 40px; width: 85%"
            size="small"
          ></el-input>
        </div>
        <div
          style="
            margin-top: 10px;
            width: 85%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="width: 500px">
            <span style="margin-right: 40px">停水类型：</span>
            <el-radio v-model="shutdownType" label="1">计划性停水</el-radio>
            <el-radio v-model="shutdownType" label="0">临时停水</el-radio>
          </div>
          <div>
            口径：
            <el-input
              v-model="diameter"
              style="width: 150px"
              size="small"
            ></el-input>
          </div>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水时间：</span>
          <el-date-picker
            v-model="shutdownTimeRange"
            style="margin-left: 40px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">实际操作时间：</span>
          <el-date-picker
            v-model="actualOperationTimeRange"
            style="margin-left: 11px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水区域：</span>
          <el-input
            v-model="shutdownArea"
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <span style="line-height: 50px">停水备注：</span>
          <el-input
            v-model="shutdownRemark"
            style="margin-left: 40px; width: 85%"
            size="small"
            type="textarea"
          ></el-input>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button type="primary" size="small" plain @click="pushToOA"
          >推送OA</el-button
        >
        <el-button
          style="margin-left: 15px"
          type="primary"
          size="small"
          plain
          @click="pushToWeChat"
        >
          直接推送微信
        </el-button>
        <el-button
          style="margin-left: 15px"
          type="primary"
          size="small"
          plain
          @click="cancelOperate"
        >
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listPlan,savePlan,getPlan,deletePlan} from "@/api/EquipmentManagement";
export default {
  data() {
    return {
      tableData: [],
        userDetailVisible: false, // 对话框显示状态
        selectedPressureTypes: [], // 压力类型选中值
      userName: "", // 户名输入值
      userAddress: "", // 地址输入值
      newAccountNumber: "", // 新增户号输入值
      // tableData: [], // 表格数据
      userTableData:[],
      shutdownNumber: "", // 停水编号
      shutdownTitle: "停水通知", // 停水标题
      shutdownReason: "因施工需要", // 停水原因
      implementationLocation: "", // 实施地点
      shutdownType: "1", // 停水类型
      diameter: "", // 口径
      shutdownTimeRange: [], // 停水时间范围
      actualOperationTimeRange: [], // 实际操作时间范围
      shutdownArea: "", // 停水区域
      shutdownRemark: "给您造成不便，敬请谅解！", // 停水备注
    };
  },
  watch:{
    planForm(val){
      console.log("表单内的值发生变化")
      this.pressureLevel = val.pressureType;
    this.userName = val.username;
    this.userAddress = val.address;
    this.shutdownNumber = val.waterStopCode;
    this.shutdownTitle = val.waterStopTitle;
    this.shutdownReason = val.waterStopReason;
    this.implementationLocation = val.implementationLocation;
    this.shutdownType = val.waterStopType;
    this.diameter = val.diameterValue;
    this.shutdownTimeRange = [val.startDate, val.endDate];
    this.actualOperationTimeRange = [val.actualOperationStartDate, val.actualOperationEndDate];
    this.shutdownArea = val.waterStopArea;
    this.shutdownRemark = val.waterStopNotes;
    this.userTableData = val.userMeters;
    },
  },
  methods:{
    refreshTable(){
      listPlan().then((res)=>{
            this.tableData=res.data;
    })
    },
    getDefaultTimeRange() {
      const today = new Date();
      const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0); // 当天 0 点 0 分 0 秒
      const end = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59); // 当天 23 点 59 分 59 秒

      return [start.toString(), end.toString()];
    },
    generateDefaultNumber() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const day = String(today.getDate()).padStart(2, '0');
      const suffix = '01'; // 后缀固定为01
      return `${year}${month}${day}${suffix}`;
    },
    cancelOperate() {
      this.userDetailVisible = false;
    },
    addAccountNumber() {
      // 添加户号的逻辑
      console.log("添加户号:", this.newAccountNumber);
      this.userTableData.push({
        accountNumber: this.newAccountNumber,
        userName: this.userName,
        address: this.userAddress,
        diameter: this.diameter,
        pressureLevel: this.selectedPressureTypes.join(", "),
      });
      this.newAccountNumber = ""; // 清空输入框
    },
    exportForm() {},
    pushToOA() {
      let planParams={
        pressureType:this.pressureLevel,
        username:this.userName,
        address:this.userAddress,
        waterStopCode:this.shutdownNumber,
        waterStopTitle:this.shutdownTitle,
        waterStopReason:this.shutdownReason,
        implementationLocation:this.implementationLocation,
        waterStopType:this.shutdownType,
        diameterValue:this.diameter,
        startDate:this.shutdownTimeRange[0],
        endDate:this.shutdownTimeRange[1],
        actualOperationStartDate:this.actualOperationTimeRange[0],
        actualOperationEndDate:this.actualOperationTimeRange[1],
        waterStopArea:this.shutdownArea,
        waterStopNotes:this.shutdownRemark,
        userMeters:this.userTableData,
      };
      console.log("推送OA");
      savePlan(planParams).then((res)=>{
         if(res.code==200){
          console.log("保存成功")
         }
      })
    },
    pushToWeChat() {
      console.log("推送微信");
    },
    openDetail(row){
      console.log("方案列表点击行的值",row);
      this.userDetailVisible=true;
      // this.$store.commit("setPlanForm",row);
      getPlan({id:row.id}).then((res)=>{

this.$store.commit("setPlanForm",res.data);
      })

    },
    deleteRow(row){
      console.log("删除分析方案",row)
      deletePlan({id:row.id}).then((res)=>{
         if(res.code==200){
          this.$message.success("删除成功")
         }
      })
    },
  },
  computed:{
    planForm(){
      return this.$store.state.planForm;
    }
  },
  mounted(){
    this.shutdownTimeRange=this.getDefaultTimeRange();
    this.actualOperationTimeRange=this.getDefaultTimeRange();
    this.shutdownNumber = this.generateDefaultNumber();
    listPlan().then((res)=>{
            this.tableData=res.data;
    })
  },
};
</script>
<style  lang="scss" scoped>
::v-deep.el-radio {
  color: white;
}
::v-deep .el-select {
  width: 6rem;
}
::-webkit-scrollbar {
  display: none;
}
.userDetailDialog {
  // background-color: #FFF;
  width: 45rem;
  height: 48rem;
  left: 27%;
  top: 9%;
  // overflow: hidden;
  ::v-deep .el-dialog__wrapper {
    width: 33rem !important;
  }
  ::v-deep .el-dialog {
    // width: 70%;
    background-color: #285383;
    color: #fff;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__body {
      color: #fff;
    }
  }
}
</style>
